<script setup lang="ts">
import { ref, onMounted } from "vue";
//import { alarmNum } from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});
const getData = () => {
  var res = {
    "success": true,
    "data": {
      "dateList": [
        "2021-11-01", "2021-11-02", "2021-11-03", "2021-11-04", "2021-11-05", "2021-11-06", "2021-11-07",
        "2021-11-08", "2021-11-09", "2021-11-10", "2021-11-11", "2021-11-12", "2021-11-13", "2021-11-14",
        "2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18", "2021-11-19", "2021-11-20", "2021-11-21",
        "2021-11-22", "2021-11-23", "2021-11-24", "2021-11-25", "2021-11-26", "2021-11-27", "2021-11-28",
        "2021-11-29", "2021-11-30",
      ],
      "numList": [
        14, 40, 15, 16, 19, 14, 17,
        15, 16, 13, 17, 15, 14, 18,
        16, 19, 15, 14, 16, 17, 15,
        18, 14, 16, 19, 15, 17, 16,
        14, 0,
      ]
    }
  }
  // alarmNum()
  //   .then((res) => {
  //     console.log("右上--报警次数 ", res);
  //     if (res.success) {
        setOption(res.data.dateList, res.data.numList);
    //   } else {
    //     ElMessage({
    //       message: res.msg,
    //       type: "warning",
    //     });
    //   }
    // })
    // .catch((err) => {
    //   ElMessage.error(err);
    // });
};
const setOption = async (xData: any[], yData: any[]) => {
  option.value = {
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        show:true,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
        interval: 6,
        //rotate: 30,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "35px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: "产能数",
        color: "rgba(252,144,16,.7)",
        label: {
          position: 'right',
          show: true,
          textStyle:{
            color:'white',
          }
        },
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(0,0,0,1,
            [
              {
                offset: 0,
                color: "rgba(252,144,16,.7)",
              },
              {
                offset: 1,
                color: "rgba(252,144,16,.0)",
              },
            ],
            false
          ),
        },
        // markPoint: {
        //   data: [
        //     {
        //       name: "最高产能",
        //       type: "max",
        //       valueDim: "y",
        //       symbol: "rect",
        //       symbolSize: [60, 26],
        //       symbolOffset: [30, -20],
        //       itemStyle: {
        //         color: "rgba(0,0,0,0)",
        //       },
        //       label: {
        //         color: "#FC9010",
        //         backgroundColor: "rgba(252,144,16,0.1)",
        //         borderRadius: 6,
        //         padding: [7, 14],
        //         borderWidth: 0.5,
        //         borderColor: "rgba(252,144,16,.5)",
        //         formatter: "{b}：{c}",
        //       },
        //     },
        //   ],
        // },
      }
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <VueEcharts class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss"></style>
